@import "./common.less";
.wheelWrap {
  width: 100%;
  height: 100%;
  background: url('../assets/wheel/new/wheel_bg.png') no-repeat 0 0 ;
  background-size:100% 100%;
}
.wheelWrap2 {
  width: 100%;
  height: 100%;
}
.wheel-oooo {
  padding: 0 .338164rem;
}

.wheel-wrapper {
  position: relative;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
  display: block;
  border-radius: .289855rem;
  padding: .338164rem .217391rem;
  box-sizing: border-box;
}

.wheel-rotate-container {
  position: relative;
  width: 100%;
  height: 9.202899rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1000;
  padding: .724638rem .289855rem;
  box-sizing: border-box;
  overflow: hidden;
}

.ana {
  transition: transform 3.6s ease-in-out;
}

.wheel-rotate-wrapper {
  /* position: absolute; 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
    z-index: 900;
  */
/*   
  padding: .821256rem .289855rem;
  margin: auto auto;
  box-sizing: border-box; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-flow: wrap;
}

.wheel-triangle {
  /* position: absolute; */
  width: 1.932367rem;
  height: 1.763285rem;
 /*  background: url('../assets/wheel/new/item1.png') no-repeat 0 0;
  background-size: 100% 100%; */
  background-color: #f00;
/*   border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid green;
  display: block; */
}

.ta-content {
  position: absolute;

  transform: rotate(270deg);

  color: #bf9117;
  letter-spacing: 1px;
  font-size: .27rem;
}

.ta-content img {
  width: 1rem;
  display: block;
}

.ta-gift {
  width: .7rem !important;
}

.rotate {
  transform: rotate(720deg);
  transition: transform 3s ease-in-out;
}

@linesWeight: 2rem;

.wheel-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  margin: auto auto;

  width: @linesWeight;
  height: 10px;

  background: #000;
  z-index: 99999;
  transform: rotate(90deg) translateX(-(@linesWeight / 2));
}

// .wheel-btn {
//   .btn();
// }
.wheel-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4.347826rem;
}
.wheel-header img {
  display: block;
}

.wheel-pointer {
  position: absolute;
  left: 0;
  right: 0;
  top: 4.178744rem;

  width: 4.154589rem;
  height: 4.154589rem;
  margin: auto auto;
  z-index: 1111;
}

.wheel-bg1 {
  background-repeat: no-repeat;
  background-size: 100% 100%;

  padding-top: 0.35rem;
  padding-bottom: 0.8rem;
}

.wheel-text-helper {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  color: white;
  background-color:#19CAD9;
  font-size: .410628rem;
  font-weight: bold;
  border-radius: .289855rem;
  height: .942029rem;
  letter-spacing: .036232rem;
  line-height: .942029rem;
  margin-bottom: .338164rem;
}

.btn-group {
  margin: 0.3rem auto;
  width: 82.5%;
}

.wheel-btn {
  font-size: .410628rem;
  letter-spacing: .024155rem;
  font-weight: 300;
  color: white;
  text-align: center;
  padding: 0.3rem;
  width: 35%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.wheel-text-spc {
  color: #fffc00;
}

.bg-out-container {
  position: fixed;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  display: none;
  z-index: 9999;
  overflow: hidden;
}

.bg-out-container.show {
  display: block;
}

.bg-out-render {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, .5);
  z-index: -1;
}

.bg-out-modal { 
  position: relative;
  margin: 4rem auto 0;
  width: 70%;
  transform: scale(0);
  opacity: 0;
  transition: all 10s ease-in-out;

  .bgggggg {
    width: 100%;
    height: auto;
    display: block;
  }

  .bg-out-content {
    position: relative;
    width: 100%;
  }
}

.bg-out-modal.show {
  transform: scale(1);
  opacity: 1;
}

.modal-text-1 {
  position: relative;
  top: 0;
  left: 0;
  right: 0;

  width: 60%;
  margin: 0 auto;
  text-align: center;

  letter-spacing: 1px;
  line-height: 1.3;
}

.m-logo {
  width: 1.980676rem;
  height: .966184rem;
  line-height: .966184rem;
  margin: 0 auto;
  color: #FF5355;
  font-size: .434783rem;
  letter-spacing: .024155rem;
  margin-top: .458937rem;
}

.m-t {
  display: block;
  margin-top: .217391rem;
  text-align: center;
  font-size: .386473rem;
  font-weight: bold;
  color: #333333;
}

.m-t2 {
  margin-top: 1.304348rem;
  color: #999;
  font-size: .2657rem;
  display: block;
}

.m-t3 {
  margin-top: 15%;
  color: #fff;
  display: block;
}

.m-t4 {
  margin: 2.391304rem auto 0;
  font-size: .507246rem;
  width: 3.285024rem;
  height: 1.207729rem;
  line-height: 1.207729rem;
  color: #F3880E;
  font-weight: bold;
  background-color: #F9D755;
  box-shadow: 0px .072464rem .144928rem rgba(146, 26, 10, 0.5);
  border-radius: .676329rem;
}

.xxxx-s {
  width: 90%;
  margin: .6rem auto 0;
}

.x-s-x-s {
  color: whitesmoke;
  font-size: .3rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 1px;
}
/* 2021/2/27 */
.pItem {
  width: 1.932367rem;
  height: 1.763285rem;
  background-color: #fff;
  border-radius: .096618rem;
  padding: .096618rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pItem>img {
  width: 100%;
  height: 100%;
  display: block;
}
.pItem .pTitle {
  width: 100%;
  height: 100%;
  border: .024155rem dashed #19C9DA;
  color: #19C9DA;
  font-size: .338164rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .096618rem;
}
.pItem:nth-child(6) {
  margin-left:50%;
}
.pItem:nth-child(7) {
  margin-right: 50%;
}
.isBg {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.active {
  background-color: rgba(25, 201, 218, 1);
  opacity: .7;
}


.shot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  min-width: 3.333333rem;
  height: 1.062802rem;
  font-size: .386473rem;
  font-weight: bold;
  line-height: .531401rem;
  color: #333333;
  span:last-child {
    padding-top: .072464rem;
  }
}

.modal-text-1:first-child {
  top: .483092rem;
}